<template>
  <div class="wrapper-head">
      <div class="title">
         <h1>月收益明细图（日期/元）</h1>
      </div>
      <div class="monthIncome" ref='monthIncome' @click="demo">
      </div>
  </div>
</template>

<script>
import { createEchart } from '@/createEcharts'
import monthIncomeOptions from '@/echartsOptions/mothIncome'
export default {
   data () {
      return {
          messge:"this-is-bus"
      }
   },
   created() {
     
   },
   mounted() {
 
      createEchart(this.$refs.monthIncome,monthIncomeOptions)
      
   },
   methods: {
        demo() {
              this.bus.$emit('setMessage',this.messge);
        }
   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper-head {
   height: 100%;
   padding: 10px;
   background: url("../../assets/incom2.png") no-repeat;
   background-size: 100% 100%;
   box-sizing: border-box;
}
.monthIncome {
  height: 90%;
  width:100%;
  padding-left: 35px;
}
.title {
   color: aliceblue;
   text-align: center;
   position: relative;
   top: 15px;
}
</style>
